內容很多的網站，時常會在右下角設計一個 onTop 按鈕。那要如何在 App 中達成，「按下某個按鈕，就滑到特定區塊」這種功能呢？

首先，來拆解一下功能。我們需要一個能滑到特定區域的指令，也需要取得特定區域的資料。

過往沒有使用框架時，開發者要操控網頁 DOM ，會透過綁定 id ，再以 document.querySelector 或 document.getElementById 取得元素後，進行後續處理。而 React 提供一個 useRef 的 Hook ，讓我捫能直接以 ref 綁定要操控的元素。換句話說，在上述功能中我們需綁定要滑動的區塊。綁定方式很簡單，給 ref 一個名稱，以 useRef() 初始化，再到要綁定的元件以 ref={refName} 綁定即可。注意！ ref 就像 id 一樣，是不能重複的。

import {useRef} from 'react';
function HomeScreen() {
  const scrollRef = useRef();
  return (
    <View>
      <ScrollView ref={scrollRef} style={styles.container}>
        <Text>
LoremLore… 省略
        </Text>
      </ScrollView>
      <TouchableOpacity onPress={onPressTouch} style={styles.btn}>
        <Text>to top</Text>
      </TouchableOpacity>
    </View>
);
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#999',
    height: hp('50%'),
    paddingHorizontal: 25,
    marginBottom: 20,
  },
  btn: {
    backgroundColor: 'cyan',
    alignItems: 'center',
    paddingVertical: 5,
  },
});

透過 console.log() 觀察 scrollRef ，會發現他是個包了許多資料與方法的物件，讓我們能操控元素。其中，有一個方法叫 scrollTo ，顧名思義是讓元素滑動到特定位置的方法。

scrollTo 可以傳入 x 和 y 軸的位置，也可以藉由調整 animated 的布林值，讓滑動的方式以較滑順的動畫來呈現。預設是 true ，調為 false 則會直接跳到指定位置，不會慢慢上滑或下滑。

const onPressTouch = () => {
  scrollRef.current?.scrollTo({
    y: 0,
    animated: true,
  });
};

如此一來，我們就完成一個簡易的 toTop 按鈕。

useRef 還有另一個特性，當把值存在裡頭時，即使值被更新也不會觸發重新渲染。因此除了可以用來操控 DOM 外，也可以用這些特性阻止無限迴圈，或取得過去的值。關於 useRef() 詳細介紹，可以參考這篇 [誰來跟我 React 一下] useRef。